<template>
  <div>
    <el-breadcrumb separator="/" class="breadcrumb">
      <el-breadcrumb-item :to="{ path: '/' }">统计</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="subjectTitle">
      <el-collapse style="margin-left: 5%;" v-model="activeNames" @change="handleChange">
        <el-collapse-item title="筛选考试" name="1">
          <div class="check-box">科目：
            <el-radio-group v-model="searchForm.subjectId">
              <el-radio v-for="item in subjects"
                        :key="item.id"
                        :label="item.id">{{item.name}}</el-radio>
            </el-radio-group>
          </div>
          <el-link type="info" @click="clearSearch">清空</el-link>
        </el-collapse-item>
      </el-collapse>
      <el-button type="primary" style="margin-left:10%; height: 50px;" @click="search">搜索考试</el-button>
    </div>
    <div style="width: 90%; margin-left: 5%; margin-top: 10px;">
      <el-table
        :data="examList"
        style="width: 100%">
        <el-table-column
          prop="name"
          label="名称">
        </el-table-column>
        <el-table-column
          prop="subject"
          label="科目"
          width="130">
        </el-table-column>
        <el-table-column
          prop="status"
          label="考试状态"
          width="130">
        </el-table-column>
        <el-table-column
          label="开始时间"
          prop="startTime"
          width="180">
        </el-table-column>
        <el-table-column
          label="结束时间"
          prop="endTime"
          width="180">
        </el-table-column>
        <el-table-column
          label="操作"
          width="180">
          <template slot-scope="scope">
            <el-link type="info" @click="goToExam(scope.row)">详情</el-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          layout="total, prev, pager, next"
          :page-size="pagination.page_size"
          :current-page="pagination.index"
          :total="pagination.total"
          @current-change="changePage">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {examSearch} from '../../../api/exam'
import {findSubjectsByHouse} from '../../../api/questions'
export default {
  name: 'ExamForAnalysis',
  data () {
    return {
      // 分页信息
      pagination: {
        page_size: 5,
        index: 1,
        total: 0
      },
      // 筛选条件
      activeNames: [],
      searchForm: {
        subjectId: null
      },
      // 表格信息
      examList: [
        {
          createTime: '2022-04-02 15:54:34',
          endTime: '2022-04-03 04:00:00',
          id: 10,
          name: '2022软件工程考试',
          startTime: '2022-04-03 02:00:00',
          status: '未发布',
          subject: '软件工程',
          teacherNumber: '2019',
          updateTime: '2022-04-02 15:54:34'
        }
      ],
      subjects: [
        {
          id: 1,
          name: '静态科目'
        }
      ]
    }
  },
  mounted () {
    this.getSubjectByHouse()
    this.getExams()
  },
  methods: {
    // 查找该老师所有考试
    getExams () {
      let parameters = {
        teacherId: sessionStorage.getItem('teacherId'),
        page_size: this.pagination.page_size,
        index: this.pagination.index - 1,
        subjectId: null,
        status: '批阅完成'
      }
      examSearch(parameters).then(res => {
        console.log(res)
        if (res.data.errorCode === 0) {
          this.examList = res.data.data.list
          this.pagination.total = res.data.data.total
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 跳转详情
    goToExam (item) {
      this.$router.push({path: '/analysis/examAnalysis', query: {exam: JSON.stringify(item)}})
    },
    // 通过学院获取科目
    getSubjectByHouse () {
      findSubjectsByHouse(sessionStorage.getItem('teacherHouse')).then(res => {
        console.log(res.data)
        if (res.data.errorCode === 0) {
          this.subjects = res.data.data
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 翻页
    changePage (val) {
      this.pagination.index = val
      this.getExams()
    },
    // 搜索
    handleChange (val) {
      console.log(val)
    },
    // 搜索
    clearSearch () {
      this.searchForm = {
        subjectId: null,
        status: null
      }
      this.getExams()
    },
    search () {
      this.pagination = {
        page_size: 5,
        index: 1,
        total: 0
      }
      let parameters = {
        teacherId: sessionStorage.getItem('teacherId'),
        page_size: this.pagination.page_size,
        index: this.pagination.index - 1,
        subjectId: this.searchForm.subjectId,
        status: '批阅完成'
      }
      examSearch(parameters).then(res => {
        console.log(res)
        if (res.data.errorCode === 0) {
          this.examList = res.data.data.list
          this.pagination.total = res.data.data.total
        } else {
          this.$message.error(res.data.message)
        }
      })
    }
  }
}
</script>

<style scoped>
  .breadcrumb {
    padding: 20px;
  }

  .subjectTitle {
    font-size: 25px;
    font-weight: bold;
    margin: 0 20px;
    display: grid;
    grid-template-columns: 80% 10% 10%;
  }

  .check-box {
    margin-bottom: 5px;
    text-align: left;
  }
</style>
